<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">多级表头</view>
			<view class="tui-page__desc">数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。</view>
		</view>
		<tui-table>
			<tui-tr  backgroundColor="#F4F7FA">
				<tui-td bold :span="8">日期</tui-td>
				<tui-td :borderRight="false" bold :span="16" ellipsis padding="0">
					<tui-td bold borderBottom :borderRight="false">配送信息</tui-td>
					<tui-tr borderWidth="0"  backgroundColor="#F4F7FA">
						<tui-td bold >姓名</tui-td>
						<tui-td bold >地址</tui-td>
					</tui-tr>
				</tui-td>
			</tui-tr>
			<tui-tr v-for="(item, index) in listData" :key="index">
				<tui-td :span="8" >{{item["date"]}}</tui-td>
				<tui-td :span="8" >{{item["name"]}}</tui-td>
				<tui-td :span="8" >{{item["address"]}}</tui-td>
			</tui-tr>
		</tui-table>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData: [{
						id: 1,
						name: '张三',
						date: '2020-11-11',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 2,
						name: '李四',
						date: '2020-11-11',
						address: '上海市普陀区金沙江路'
					},
					{
						id: 3,
						name: '王小虎',
						date: '2020-11-11',
						address: '上海市普陀区金沙江路'
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style>

</style>
